<template>
  <div>
    <el-table
      :data="tableData"
      border
      stripe
      >
      <!-- select -->
      <el-table-column v-if="table_config.checkbox" type="selection"></el-table-column>
      <!-- 其它类型表头 -->
      <template v-for="(item,index) in table_config.thead">
        <!-- 回调 -->
        <el-table-column v-if="item.type === 'function'" :prop="item.prop" :label='item.label' :key="index">
          <template slot-scope="scope">
            <span v-html="item.callback && item.callback(scope.row,item.prop)"></span>
          </template>
        </el-table-column>
        <!-- 插槽 -->
        <el-table-column :width="item.width" v-else-if="item.type === 'slot'" :prop="item.prop" :label='item.label' :key="index">
          <template slot-scope="scope">
            <slot :name="item.slotName" :data='scope.row'></slot>
          </template>
        </el-table-column>
        <!-- 默认 -->
        <el-table-column v-else :prop="item.prop" :label='item.label' :key="index"></el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'MyTable',
  props: {
    tableConfig: {
      type: Object,
      default: () => {}
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      table_config: {
        thead: [],
        checkbox: true
      }
    }
  },
  watch: {
    tableConfig: {
      deep: true,
      handler (val) {

      }
    },
    tableData: {
      deep: true,
      handler (val) {

      }
    }
  },
  beforeMount () {
    this.initConfig()
  },
  methods: {
    initConfig () {
      for (const key in this.tableConfig) {
        if (Object.keys(this.table_config).includes(key)) {
          this.table_config[key] = this.tableConfig[key]
        }
      }
    }
  }
}
</script>
